<template>
  <div class="swipercontainer" v-loading="loadingMask">
   <h2 class="title">最新评论</h2>
   <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide class="swiper-slide" v-for="(item, index) in allcomments" :key="index">
        <commentpage :commentdata="item"></commentpage>
      </swiper-slide>
      <!-- <div class="swiperpagination" slot="pagination" v-show="allcomments.length > 0? true : false"></div> -->
    </swiper>
  </div>
</template>

<script>
// 导入网络请求
import { getnewcommentsdata } from '../../../network/home'
// 导入样式
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// 导入子组件
import commentpage from './commentpage'
// vuex
import { mapActions } from 'vuex'
export default {
  name: 'newcomments',
  components: { swiper, swiperSlide, commentpage },
  data () {
    return {
      // 最新10条评论数据
      allcomments: [],
      // swiper配置
      swiperOptions: {
        // 打开分页器
        // pagination: {
        //   el: '.swiperpagination',
        //   type: 'fraction'
        // }
        // 自动高度
        // autoHeight: true,
        // 循环
        // loop: true,
        // 自动播放配置
        // autoplay: {
        //   delay: 2000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true
        // }
      },
      // 评论区加载遮罩
      loadingMask: false
    }
  },
  methods: {
    ...mapActions(['getcomment']),
    getnewcomments () {
      // this.$axios.get('http://localhost:3033/getnewcomments')
      getnewcommentsdata().then(res => {
        if (res.status === 200) {
          this.allcomments = res.data
          this.loadingMask = false
          this.getcomment(this.allcomments)
        }
      })
    }
  },
  created () {
    this.loadingMask = true
    this.getnewcomments()
    if (!this.allcomments) {
      this.allcomments = this.$store.state.newcomment
      this.loadingMask = false
    } else {
      this.getnewcomments()
    }
  }
}
</script>

<style lang='stylus' scoped>
.swipercontainer
  font-family: 'sans-serif'
  height 100%
  .title
    font-size 24px
    font-weight 700px
    padding-bottom 16px
</style>
